import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:search_people/utils/component/component.dart';
import 'package:search_people/utils/util.dart';

import '../../../../../value/topcolors.dart';
import '../index.dart';

/// hello
class MenuItemsWidget extends GetView<MenuAllController> {
  const MenuItemsWidget({
    Key? key,
    required this.md,
  }) : super(key: key);
  final MenuAllModel md;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(12.r, 10.r, 12.r, 0),
      padding: EdgeInsets.symmetric(horizontal: 10.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(3.r),
      ),
      child: Column(
        children: [
          InkWell(
            onTap: () {
              md.isExpend = !md.isExpend;
              controller.update();
            },
            child: Container(
              height: 40.r,
              alignment: Alignment.centerLeft,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Visibility(
                        visible: md.icon != null,
                        child: Container(
                          padding: EdgeInsets.only(right: 8.r),
                          child: Icon(
                            md.icon,
                            size: 18.r,
                            color: md.iconColor,
                          ),
                        ),
                      ),
                      Text(
                        md.title,
                        style: TextStyle(
                          color: TopColors.black_33,
                          fontSize: 14.sp,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                  Icon(
                    md.isExpend ? IconUtil.arrow_up : IconUtil.arrow_down,
                    size: 15.r,
                  ),
                ],
              ),
            ),
          ),
          md.isExpend
              ? Container(
                  color: Colors.white,
                  padding: EdgeInsets.symmetric(vertical: 15.r),
                  alignment: Alignment.centerLeft,
                  child: Wrap(
                    runSpacing: 20.r,
                    children: md.items
                        .asMap()
                        .map((key, value) => MapEntry(
                              key,
                              MenuItemView(
                                onTap: value.onTap,
                                width: (Get.width - 44.r) / 4,
                                icon: Stack(children: [
                                  Image.asset(
                                    value.icon.imgPathHome,
                                    width: 40.r,
                                    height: 40.r,
                                  ),
                                  Positioned(
                                      top: 0,
                                      right: 0,
                                      child: controller.state.isEditing &&
                                              md.isCanDelete
                                          ? InkWell(
                                              onTap: () {
                                                controller.actionDelete(
                                                    md: md, idx: key);
                                              },
                                              child: Container(
                                                width: 30.r,
                                                height: 30.r,
                                                alignment: Alignment.topRight,
                                                child: Icon(
                                                  Icons.remove_circle,
                                                  color: TopColors.gray_60,
                                                  size: 15.r,
                                                ),
                                              ),
                                            )
                                          : const SizedBox()),
                                ]),
                                title: Text(
                                  value.title,
                                  style: TextStyle(
                                    color: TopColors.black_33,
                                    fontSize: 12.sp,
                                  ),
                                ),
                              ),
                            ))
                        .values
                        .toList(),
                  ),
                )
              : const SizedBox(),
        ],
      ),
    );
  }
}
